<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <div @click.stop = 'handle0' v-cloak>
            {{num}}
            .stop阻止冒泡
            <button @click.stop = 'handle1'>按钮</button>
            <!-- .prevent阻止默认行为 -->
            <!-- <a href="" @click.prevent.self = 'handle1'>123</a> -->
            <!-- 修饰符可以串联 -->
          
           
        <!-- </div> --> -->
        <!-- .self只会阻止自己身上的冒泡，并不会真正阻止冒泡-->
        <div class="outer" @click="div2Handler">
            <div class="inner" @click.stop="div1Handler">
                <input type="button" value="点击" @click="btnHandler" />
            </div>
        </div>
    </div>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods: {
                handle0:function(){
                    this.num++;
                },  
                handle1:function(event){
                    
                    
                },
                div1Handler:function(){
                    console.log(1)
                },
                div2Handler: function () {
                    console.log(2)
                },
                btnHandler:function(){
                    console.log(3)
                }
            }
        })
    </script>
</body>
</html>